<template>
    <div>
        <el-row>
            <el-col :span="6">
                <el-row v-for="tab in opinionTabList" :key="tab.key"
                    :class="[tab.key === activeId ? activeClass : '', normalClass]">
                    <span @click="getInfo(tab.key)">{{ tab.label }}</span> </el-row>
            </el-col>
            <el-col :span="18">
                <div class="a4">
                    <el-row class="line-text" type="flex" justify="space-between" style="margin-top: 10px">
                        <span class="content-text">病理诊断：</span>
                    </el-row>
                    <el-row style="margin-top: 10px">
                        <el-input v-model="opinionCurrent.input_binglizhenduan" placeholder="请书写病理诊断" :rows="10"
                            type="textarea" maxlength="500">
                        </el-input>
                    </el-row>
                    <el-row class="line-text" type="flex" justify="space-between" style="margin-top: 10px">
                        <span class="content-text">建议及解释：</span>
                    </el-row>
                    <el-row style="margin-top: 10px">
                        <el-input v-model="opinionCurrent.input_jujian" placeholder="请书写相关建议及解释的内容" :rows="10"
                            type="textarea" maxlength="500">
                        </el-input>
                    </el-row>
                    <el-row class="line-text" type="flex" justify="space-between" style="margin-top: 10px">
                        <span class="content-text">加做项目：</span>
                    </el-row>
                    <el-row style="margin-top: 10px">
                        <el-input :readonly="true" v-model="opinionCurrent.input_extroProject" placeholder="加做项目的内容"
                            :rows="2" type="textarea" maxlength="200">
                        </el-input>
                    </el-row>
                </div>
            </el-col>
        </el-row>
    </div>
</template>
<script>

export default {
    name: 'historicalReport',
    props: ['orders'],
    data() {
        return {
            activeId: 1,
            activeClass: 'is-active',
            normalClass: 'btn-item',
            opinionTabList: [],
            opinionCurrent: {
                input_binglizhenduan: '',
                input_jujian: '',
                input_extroProject: ''
            },
        }
    },
    computed: {
    },
    mounted() {
        this.init()
    },
    methods: {
        init() {
            let _this = this
            _this.opinionTabList = []
            let opinionList = _this.orders.patients[0].expertDiagnosis
            opinionList.forEach(t => {
                if (t.expertId != null) {
                    _this.opinionTabList.push({
                        consultationDetailId: t.consultationDetailId,
                        key: t.id.toString(),
                        expertId: t.expertId,
                        label:
                            t.isFinal == 1
                                ? t.expertName + '(终审)' + t.createTime + (t.isFinished == 1 ? '已发布' : '未发布')
                                : t.type == 1
                                    ? t.expertName + '(邀请)' + t.createTime + (t.isFinished == 1 ? '已发布' : '未发布')
                                    : t.expertName + '(诊断)' + t.createTime +
                                    (t.isFinished == 1 ? '已发布' : '未发布'),
                        isFinished: t.isFinished,
                        isFinal: t.isFinal
                    })
                }
            })
            const isHaveFinalDoctor = _this.orders.patients[0].expertDiagnosis.some(
                item => item.isFinal == 1
            )
            if (isHaveFinalDoctor) {
                //有终审的医生tab列表
                _this.opinionTabList = _this.opinionTabList.filter(item => {
                    return item.isFinished === 1 && item.isFinal == 1
                })
            } else {
                //无终审的医生tab列表
                _this.opinionTabList = _this.opinionTabList.filter(item => {
                    return item.isFinished === 1 && item.isFinal == 0
                })
            }
            console.log(_this.opinionTabList)
            const id = parseInt(_this.opinionTabList[0].key, 10)
            this.setOptionCurrent(id)
        },
        setOptionCurrent(id) {
            const _this = this
            _this.activeId = id.toString()
            const opinion = _this.getOpinionBySpecialistId(id)
            _this.opinionCurrent =
                opinion.detailString != null
                    ? JSON.parse(_.get(opinion, 'detailString', {}))
                    : {
                        input_binglizhenduan: '',
                        input_jujian: '',
                        input_extroProject: ''
                    }
        },
        getOpinionBySpecialistId(id) {
            return this.orders.patients[0].expertDiagnosis.find(t => t.id == id)
        },
        getInfo(id) {
            this.activeId = id;
            this.setOptionCurrent(id)
        }
    }
}
</script>
<style scoped>
.btn-item {
    cursor: pointer;
    line-height: 28px;
    padding-left: 10px;
    border-radius: 2px;
}

.is-active {
    color: #ffffff;
    background-color: #10a1df;
}

.a4 {
    width: 802px;
    height: 100%;
    margin: 0 auto;
    padding: 20px;
}
</style>